<template>
  <div class="e-tab">
    <el-tabs :type="type" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in tabData" 
        :key="index" :label="item.name" 
        :name="item.id">
        <span v-if="item.icon" slot="label">
          {{item.name}}
          <el-popover
            placement="right"
            trigger="click"
            popper-class="tab-popper">
            <ul class="opt-list">
              <li @click="handleEdit(item)">编辑</li>
              <li @click="handleDel(item)">删除</li>
            </ul>
            <i slot="reference" :class="item.icon"></i>
          </el-popover>
        </span>
      </el-tab-pane>
    </el-tabs>
    <div class="right-opt" v-if="$slots.right">
      <slot name="right"></slot>
    </div>
  </div>
  
</template>

<script>
import '@/styles/components/tab.scss';

export default {
  props: {
    tabData: Array,
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: ''
    }
  },

  watch: {
    tabData (value) {
      if (value && value.length > 0) {
        this.activeName = value[0].id;
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      this.$emit('handleTab', tab.name)
    },
    handleEdit (item) {
      console.log(item)
      this.$emit('handleEditTab', item)
    },
    handleDel (item) {
      console.log(item)
      this.$emit('handleDelTab', item)
    }
  }
}
</script>